<template>
  <div class="app-container">
    <div style="display: flex;align-items: center;margin-bottom: 50px;">
      <div style="display: flex;" class="topNumList">
        <div class="topNumItems">
          <div class="finNum">￥{{ totalSalesAmount }}</div>
          <div class="finText">总销售额</div>
        </div>
        <div class="topNumItems">
          <div class="finNum">￥{{ currMouthSalesAmount }}</div>
          <div class="finText">当月销售额</div>
        </div>
        <div class="topNumItems">
          <div class="finNum">￥{{ currDaySalesAmount }}</div>
          <div class="finText">当日销售额</div>
        </div>
      </div>
    </div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
      <el-form-item label="订单状态" prop="orderStatus">
        <el-select v-model="queryParams.orderStatus" placeholder="请选择订单状态" clearable>
          <el-option v-for="dict in dict.type.order_status" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="订单编号" prop="orderSerial">
        <el-input v-model="queryParams.orderSerial" placeholder="请输入订单编号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="订单支付流水号" prop="payOrderSerial">
        <el-input v-model="queryParams.payOrderSerial" placeholder="请输入订单支付流水号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="店铺名称" prop="storeName">
        <el-input v-model="queryParams.storeName" placeholder="请输入店铺名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="商品标题" prop="productName">
        <el-input v-model="queryParams.productName" placeholder="请输入商品标题" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!-- 筛选添加用户id和收货人姓名，收货人手机号 -->
      <el-form-item label="用户id" prop="userId">
        <el-input v-model="queryParams.userId" placeholder="请输入用户id" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="收货人姓名" prop="toUser">
        <el-input v-model="queryParams.toUser" placeholder="请输入收货人姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="收货人手机号" prop="toPhone">
        <el-input v-model="queryParams.toPhone" placeholder="请输入收货人手机号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="支付时间">
        <el-date-picker v-model="datePayRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button v-hasPermi="['store:orderhead:listAll']" type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="productinfoList" style="width: 100%" :max-height="tableHeight()">
      <el-table-column prop="orderSerial" align="left" label="订单编号">
      </el-table-column>
      <el-table-column prop="payOrderSerial" align="left" label="支付订单编号">
      </el-table-column>
      <el-table-column prop="crTime" align="left" label="创建时间">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.orderDetails" :key="index" class="mesSty">
            {{removeSeconds(scope.row.crTime)}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="storeName" align="left" label="店铺名称">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.orderDetails" :key="index" class="mesSty">
            {{scope.row.storeName}}
          </div>
        </template>
      </el-table-column>
      <!-- 测试 -->
      <el-table-column prop="storeName" align="left" label="商品" width="350px">
        <template slot-scope="scope">
          <div style="margin-top: 5px;margin-bottom: 5px;" v-for="(item, index) in scope.row.orderDetails" :key="index" class="mesSty">
            <div style="display: flex;">
              <div style="width: 100px;height: 100px;">
                <el-image style="width: 100px; height: 100px" :preview-src-list="[item.mainPic]" :src="item.mainPic" fit="contain"></el-image>
              </div>
              <div
                style="width: 250px;display: flex;flex-direction:column;justify-content: center;padding-left: 10px;padding-right: 20px;box-sizing: border-box;">
                <div>
                  <el-tooltip class="item" effect="dark" placement="top" :content="item.productName">
                    <div class="cell-ellipsis">{{ item.productName }}</div>
                  </el-tooltip>
                </div>
                <div><el-tooltip class="item" effect="dark" placement="top" :content="item.specification">
                    <div class="cell-ellipsis">{{ item.specification }}</div>
                  </el-tooltip></div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="salePrice" align="left" label="商品金额">
        <template slot-scope="scope">
          <div style="font-weight: bold;color: #f00;" v-for="(item, index) in scope.row.orderDetails" :key="index"
               class="mesSty">
            ¥{{item.totalAmount}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="salePrice" align="left" label="商品单价">
        <template slot-scope="scope">
          <div style="font-weight: bold;color: #f00;" v-for="(item, index) in scope.row.orderDetails" :key="index"
            class="mesSty">
            ¥{{item.salePrice}}
          </div>
        </template>
      </el-table-column>
      <!-- 数量  productNumb（里面） -->
      <el-table-column prop="productNumb" align="left" label="数量">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.orderDetails" :key="index" class="mesSty">
            x{{item.productNumb}}
          </div>
        </template>
      </el-table-column>
      <!-- 支付时间  payTime（外面） -->
      <el-table-column prop="payTime" align="left" label="支付时间">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.orderDetails" :key="index" class="mesSty">
            {{removeSeconds(scope.row.payTime)}}
          </div>
        </template>
      </el-table-column>
      <!-- 订单状态123  orderStatus（外面） -->
      <el-table-column prop="orderStatus" align="center" label="订单状态">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.order_status" :value="scope.row.orderStatus" />
          <!-- <el-tag size="medium" :type="dictList(scope.row.orderStatus)">
              <dict-tag :options="dict.type.order_status" :value="scope.row.orderStatus" />
            </el-tag> -->
          <!-- <div v-for="(item, index) in scope.row.orderDetails" :key="index" class="mesSty">
            <div>
              <el-tag size="medium" :type="dictList(scope.row.orderStatus)">
              <dict-tag :options="dict.type.order_status" :value="scope.row.orderStatus" />
            </el-tag>
            </div>
          </div> -->
        </template>
      </el-table-column>
      <!-- 售后状态 orderDetails. productStatus（里面） -->
      <el-table-column prop="productStatus" align="center" width="180px" label="售后状态">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.orderDetails" :key="index" class="mesSty">
            <div v-if="item.productStatus==='1'||item.productStatus==='2'||item.productStatus==='4'">
              <dict-tag :options="dict.type.product_status" :value="item.productStatus" />
              <!-- <el-tag size="medium" :type="dictShList(item.productStatus)">
              <dict-tag :options="dict.type.product_status" :value="item.productStatus" />
            </el-tag> -->
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- 订单备注  orderDetails.productRemark（里面） -->
      <el-table-column prop="productRemark" align="left" label="订单备注">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.orderDetails" :key="index" class="mesSty">
            {{item.productRemark}}
          </div>
        </template>
      </el-table-column>
      <!-- 是否开票   invoiceStatus（外面） -->
      <el-table-column prop="invoiceStatus" align="center" label="是否开票">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.orderDetails" :key="index" class="mesSty">
            <el-tag v-if="scope.row.invoiceStatus" size="medium" :type="dictInvoiceList(scope.row.invoiceStatus)">
              <dict-tag :options="dict.type.invoice_flag" :value="scope.row.invoiceStatus" />
            </el-tag>
          </div>
        </template>
      </el-table-column>
      <!-- 买家收货信息 -->
      <el-table-column prop="orderSerial" align="left" label="买家收货信息" width="180">
        <template slot-scope="scope">
          <div style="text-align: left;">
            {{scope.row.toUser}}，{{telephoneDesen(scope.row.toPhone)}}，{{scope.row.emsToPrefix}}{{scope.row.emsTo}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="payMethods" align="center" label="支付方式">
        <template slot-scope="scope">
            <el-tag size="medium">
              <dict-tag :options="dict.type.pay_methods" :value="scope.row.payMethods" />
            </el-tag>
        </template>
        <!--  -->
      </el-table-column>
      <el-table-column prop="actualAmount" align="left" label="订单金额">
        <template slot-scope="scope">
          <div style="font-weight: bold;color: #f00;">
            ¥{{scope.row.totalAmount}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="actualAmount" align="left" label="订单优惠金额">
        <template slot-scope="scope">
          <div v-if="scope.row.orderCouponAmount !== null && scope.row.orderCouponAmount !== undefined" style="font-weight: bold;color: #f00;">
            - ¥{{scope.row.orderCouponAmount}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="actualAmount" align="left" label="实付金额">
        <template slot-scope="scope">
          <div v-if="scope.row.couponAmount !== null && scope.row.couponAmount !== undefined" style="font-weight: bold;color: #f00;">
            ¥{{scope.row.couponAmount}}
          </div>
          <div v-else style="font-weight: bold;color: #f00;">
            ¥{{scope.row.totalAmount}}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="确认收货时间" align="center" prop="receiveTime" width="150"/>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getProductinfoNew" />
  </div>
</template>

<script>
  import {
    getOrderheadList,
    getStatsOrderSalesAmount
  } from "@/api/store/orderhead";

  export default {
    name: "allOrders",
    dicts: ['order_status','product_status','pay_methods','invoice_flag'],
    data() {
      return {
        groundVisible: false, //上架
        offShelfVisible: false, //下架
        nestedTableData: [],
        dictArr: [{
            value: '0',
            label: '未生效'
          },
          {
            value: '1',
            label: '已生效'
          }
        ],
        tableData: [],
        editForm: {},
        dialogVisible: false,
        dialogTitle: '',
        tabPosition: 'left',
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 商品类目表格数据
        productinfoList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          orderStatus: '',
          orderSerial: '',
          productName: "",
          userId:'',
          toUser:'',
          toPhone:'',
          storeName:''
        },
        // 表单参数
        form: {},
        xlsFile: [],
        fileListN: [],
        listNew: [],
        xlsFile1: [],
        fileListN1: [],
        listNew1: [],
        // 表单校验
        rules: {},
        allList: [],

        addressXz: [],
        propsObj: {
          label: 'text',
          value: 'value',
          option: 'children',
        },
        pastInventoryList: [],
        pastProductInfo: {},
        // 修改的
        updateInventoryList: [],
        // 新增的
        insertInventoryList: [],
        inventoryIdids: [],
        viewDialogVisible: false,
        viewGgData: [],
        dateRange: [],
        datePayRange: [],
        // 总销售额
        currDaySalesAmount:'',
        // 当月销售额
        currMouthSalesAmount:'',
        // 当日销售额
        totalSalesAmount:'',
      };
    },
    created() {
      this.getProductinfoNew()
      this.getTotal()
    },
    methods: {
      getTotal(){
        getStatsOrderSalesAmount().then(response => {
          if(response.data){
            console.log(response,'responseresponseresponse')
            this.currDaySalesAmount =  response.data.currDaySalesAmount
            this.currMouthSalesAmount = response.data.currMouthSalesAmount
            this.totalSalesAmount = response.data.totalSalesAmount
          } else {
            this.currDaySalesAmount =  "0.00"
            this.currMouthSalesAmount = "0.00"
            this.totalSalesAmount = "0.00"
          }
        });
      },
      getSHXMen(data) {
        let toProvince = this.getProvinceName(data.toProvince) ? this.getProvinceName(data.toProvince) : ''
        let toCity = this.getCityName(data.toCity) ? this.getCityName(data.toCity) : ''
        let toCounty = this.getCountyName(data.toCounty) ? this.getCountyName(data.toCounty) : ''
        let res = toProvince + toCity + toCounty
        return res
      },
      tableHeight() {
        return document.body.clientHeight - 400;
      },
      dictList(res) {
        if (res === '0') {
          return 'warning';
        } else if (res === '1') {
          return 'warning';
        } else if (res === '2') {
          return '';
        } else if (res === '3') {
          return '';
        } else if (res === '4') {
          return 'danger';
        } else if (res === '10') {
          return 'success';
        } else if (res === '11') {
          return 'info';
        } else {
          return '';
        }
      },
      dictShList(res){
        if (res === '0') {
          return 'warning';
        } else if (res === '1') {
          return 'warning';
        } else if (res === '2') {
          return '';
        } else if (res === '3') {
          return '';
        } else if (res === '4') {
          return 'danger';
        } else if (res === '10') {
          return 'success';
        } else if (res === '11') {
          return 'info';
        } else {
          return '';
        }
      },

      dictInvoiceList(res){
        if (res === '0') {
          return 'info';
        } else if (res === '1') {
          return 'success';
        } else {
          return '';
        }
      },

      getProductinfoNew() {
        let params = {
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
          orderSerial: this.queryParams.orderSerial,
          productName: this.queryParams.productName,
          orderStatus: this.queryParams.orderStatus,
          userId: this.queryParams.userId,
          toUser: this.queryParams.toUser,
          toPhone: this.queryParams.toPhone,
          storeName:this.queryParams.storeName,
          payOrderSerial:this.queryParams.payOrderSerial
        }
        getOrderheadList(this.addPayDateRange(params, this.dateRange, this.datePayRange)).then(response => {
          if (response.code == '200') {
            this.loading = false
            this.productinfoList = response.data
            this.total = response.total
          }
        });
      },

      viewDetails() {

      },

      shopAdd() {
        this.$router.push("/productinfoDetails");
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          storeName: '',
          productCode: '',
          productFlag: '',
          productName: '',
        };
        this.resetForm("form");
        this.xlsFile = [];
        this.fileListN = [];
        this.listNew = [];
        this.tableData = []

      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getProductinfoNew();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.dateRange = []
        this.datePayRange = []
        this.handleQuery();
      },
    }
  };
</script>
<style scoped>
  /* .el-table__row.expanded {
    display: none;
  } */

  .mesSty {
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
  }
  .cell-ellipsis {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
  }

  .topNumList {}

.topNumItems {
  display: flex;
  flex-direction: column;
  margin-right: 50px;
}

.topNumList .finNum {
  color: #1890ff;
  font-size: 30px;
  font-weight: 600;
}

.topNumList .finText {}
</style>
